<template>
    <view class="productSort">
        <view class="search-bg">
            <view class="example pad30">
                <uni-search-bar
                    radius="100"
                    placeholder="搜索药品名称"
                    @confirm="search"
                    @cancel="cancelClick"
                />
            </view>
        </view>

        <view v-if="listData.length > 0" class="listw">
            <view class="list" v-for="(item, index) in listData" :key="index">
                <!--  商品列表-->
                <view class="durgList" @click="goCart(item.id)">
                    <view class="durgImg">
                        <image :src="item.image"></image>
                    </view>
                    <view class="durgInfo">
                        <view class="durgName">
                            <!-- <text class="yibaoTips" v-if="item.medicalItemCode"
                                >医保</text
                            > -->
                              <image
                                class="yibaoTips"
                                v-if='(item.medicalItemCode || item.medicalItemCode2) && item.medicalFlag == 1'
                                src="../../static/images/chs.png"
                            />
                            {{ item.name }}
                        </view>
                        <view class="price">
                            <view
                                class="gray_font"
                                style="font-size: 26rpx; margin-top: 7rpx"
                            >
                                <text
                                    >规格：{{
                                        item.specification || '暂无规格'
                                    }}</text
                                >
                            </view>
                            <view
                                class="gray_font"
                                style="
                                    float: right;
                                    margin-top: 7rpx;
                                    font-size: 26rpx;
                                "
                                >库存：{{ item.stock || '0' }}</view
                            >
                        </view>
                        <!--                  <view class="headline gray_font">一次1-2粒，每日两次</view>-->
                        <view style="display: flex">
                            <view class="price">
                                <view class="priceMoney">
                                    <text>￥{{ item.price.toFixed(2) }}</text>
                                </view>
                            </view>
                            <view
                                style="
                                    width: 130rpx;
                                    margin-top: 15rpx;
                                    text-align: center;
                                "
                                @click.stop="getMsg(item)"
                                class="drugs_adjustment"
                                size="mini"
                                v-if="item.stock > 0"
                            >
                                加购
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more
                :status="statusLoad"
                :content-text="contentText"
                v-if="showLoadMore"
            />
        </view>

        <view class="noInfo_Img" v-else-if="showNoInfo">
            <image src="../../static/images/icon_lack_message@2x.png"></image>
        </view>
        <uni-popup ref="popup">
            <view
                style="
                    padding: 20rpx;
                    background-color: #ffffff;
                    border-top-right-radius: 15rpx;
                    border-top-left-radius: 15rpx;
                "
            >
                <view class="icon_close">
                    <image
                        @click="closeXQ"
                        style="width: 50rpx; height: 50rpx; float: right"
                        src="../../static/images/icon_close_gray.png"
                    ></image>
                </view>
                <view class="medicalinner_border">
                    <view class="medicalinner_img">
                        <image
                            style="width: 100%; height: 100%"
                            :src="drugData.image"
                        ></image>
                    </view>
                    <view style="margin-left: 25rpx">
                        <view
                            class="medicalName"
                            style="font-size: 33rpx; margin-top: 10rpx"
                        >
                            {{ drugData.name ? drugData.name : '' }}
                        </view>
                        <view class="medicalprice">
                            ￥{{
                                drugData.price ? drugData.price.toFixed(2) : ''
                            }}
                        </view>
                    </view>
                </view>
                <view
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-top: 30rpx;
                    "
                >
                    <view
                        style="
                            line-height: 60rpx;
                            font-size: 33rpx;
                            color: #999999;
                        "
                    >
                        数量
                    </view>
                    <view>
                        <uni-number-box
                            :min="1"
                            ref="usernameInput"
                            @change="changecount"
                        />
                    </view>
                </view>
                <button
                    v-if="btnsign == 1"
                    @click="addCart"
                    class="btn_appointment arc_button"
                    type="default"
                >
                    加入购物车
                </button>
            </view>
        </uni-popup>
        <view class="goods-carts" @click="onClick">
            <uni-badge
                class="uni-badge-left-margin"
                style="width: 120rpx"
                :text="cartNumber"
                absolute="rightTop"
                size="small"
                type="error"
            >
                <view
                    style="
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 40px;
                        position: relative;
                    "
                >
                    <!-- background: #fff; -->
                    <image src="../../static/images/shopCar.png"></image>
                </view>
            </uni-badge>
        </view>
    </view>
</template>

<script>
import { getUserDrugList } from '@/api/user.js';
import { cartAdd, CartNum } from '@/api/order.js';
import store from '@/store';
export default {
    data() {
        return {
            options: [
                {
                    icon: 'cart',
                    text: '购物车',
                    info: 0,
                },
            ],
            buttonGroup: [],
            listData: [],
            // 查询参数
            queryParams: {
                // categoryId: '',
                storeId: '',
                pageNum: 1,
                pageSize: 10,
                searchName: '',
            },
            //分页开始
            showLoadMore: false,
            showNoInfo: false,
            statusLoad: 'more',
            contentText: {
                contentdown: '查看更多',
                contentrefresh: '加载中...',
                contentnomore: '没有更多',
            },
            total: 0, //总条数
            nowCount: 0, //当前累计显示条数
            medicalid: '',
            drugData: {},
            Medicalcount: 1,
            btnsign: '',
            cartNumber: '',
        };
    },
    onShow() {
        this.getCartCount(); //购物车数量
    },
    onLoad() {
        // this.getCartCount() //购物车数量
        this.getList();
    },
    onReachBottom() {
        if (this.nowCount > 0 && this.nowCount >= this.total) {
            this.statusLoad = 'noMore';
        } else {
            this.showLoadMore = true;
            this.statusLoad = 'loading';
            this.getList();
        }
    },
    methods: {
        goCart(id) {
            uni.navigateTo({
                url: `/pagesSub/homePage/prescribing/mallMessage?medicalid=${id}`,
            });
        },
        cancelClick() {
            this.nowCount = 0;
            this.total = 0;
            this.queryParams.pageNum = 1;
            this.queryParams.searchName = '';
            this.listData = [];
            this.getList();
        },
        onClick() {
            uni.navigateTo({
                url: `/pagesSub/shopCar/index`,
            });
        },
        //更改数量
        changecount(e) {
            this.Medicalcount = e;
        },
        getMsg(item) {
            let _this = this;
            // _this.medicalid = id
            console.log(item);
            _this.drugData = item;
            this.btnsign = 1;
            this.$refs.popup.open('bottom');
        },
        //加入购物车
        addCart() {
            let _this = this;
            uni.showLoading({
                title: '加载中',
            });
            console.log('数量++', _this.Medicalcount);
            cartAdd({
                productId: _this.drugData.id,
                countNum: _this.Medicalcount, //数量
                type: 1, //1 添加数量，2 减少数量
                uid: store.state.app.uid,
                // doctorId: store.state.app.serviceUid, //医生id
                storeId: store.state.app.storeId, //药店id
            })
                .then((res) => {
                    if (res.code == 200) {
                        this.getCartCount();
                        this.$refs.popup.close();
                        uni.showToast({
                            title: '添加成功',
                            icon: 'none',
                            duration: 3000,
                        });
                        this.Medicalcount = 1;
                        this.$refs['usernameInput'].reset();
                        uni.hideLoading();
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: err,
                        icon: 'none',
                        duration: 3000,
                    });
                });
        },
        closeXQ() {
            this.Medicalcount = 1;
            this.$refs['usernameInput'].reset();
            this.$refs.popup.close();
        },
        // 获取购物车数量
        getCartCount() {
            let _this = this,
                storeId = store.state.app.storeId; //药店id

            uni.showLoading({
                title: '加载中',
            });
            CartNum(storeId)
                .then((res) => {
                    _this.options[0].info = res.data;
                    _this.cartNumber = res.data;
                    uni.hideLoading();
                })
                .catch((res) => {
                    uni.hideLoading();
                });
        },
        search(e) {
            console.log('^^^^', e);
            let _this = this;
            _this.queryParams.searchName = e.value;
            _this.nowCount = 0;
            _this.total = 0;
            _this.queryParams.pageNum = 1;
            _this.listData = [];
            this.getList();
        },
        getList(val) {
            let _this = this;
            let storeId = store.state.app.storeId; //药房id
            _this.queryParams.storeId = storeId;
            let newData;
            let listData = _this.listData;
            let nowCount = _this.nowCount;
            let pageNum = _this.queryParams.pageNum;
            uni.showLoading({
                title: '加载中',
            });
            getUserDrugList(_this.queryParams)
                .then((res) => {
                    let listNew = [];
                    newData = listData.concat(res.rows);
                    _this.$set(_this, 'listData', newData); //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
                    //设置分页
                    _this.total = res.total;
                    _this.queryParams.pageNum = pageNum + 1;
                    _this.nowCount = nowCount + res.rows.length;

                    if (pageNum == 1 && res.rows.length <= 0) {
                        _this.showNoInfo = true;
                    }

                    uni.hideLoading();
                })
                .catch((res) => {
                    uni.hideLoading();
                });
        },
    },
};
</script>

<style scoped lang="scss">
@import '@/static/css/style.css';

.productSort .header {
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
    border-bottom: 1rpx solid #f5f5f5;
}

.productSort .header .input {
    width: 700rpx;
    height: 60rpx;
    background-color: #f5f5f5;
    border-radius: 50rpx;
    box-sizing: border-box;
    padding: 0 25rpx;
}

.productSort .header .input .iconfont {
    font-size: 35rpx;
    color: #555;
}

.productSort .header .input .placeholder {
    color: #999;
}

.productSort .header .input input {
    font-size: 26rpx;
    height: 100%;
    width: 597rpx;
}

.productSort .aside {
    position: fixed;
    width: 24%;
    left: 0;
    top: 0;
    background-color: #f7f7f7;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    margin-top: 102rpx;
    /* 兼容 IOS<11.2 */
    bottom: calc(100rpx+ constant(safe-area-inset-bottom));
    /* 兼容 IOS>11.2 */
    bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.productSort .aside .item {
    height: 100rpx;
    width: 100%;
    font-size: 26rpx;
    color: #424242;
}

.productSort .aside .item.on {
    background-color: #fff;
    border-left: 4rpx solid #fc4141;
    width: 100%;
    text-align: center;
    color: #fc4141;
    font-weight: bold;
}

.productSort .conter {
    margin: 40rpx 0 0 180rpx;
    padding: 0 14rpx;
    background-color: #fff;
}

.productSort .conter .listw {
    padding-top: 18rpx;
}

.productSort .conter .listw .title {
    height: 90rpx;
}

.productSort .conter .listw .title .line {
    width: 100rpx;
    height: 2rpx;
    background-color: #f0f0f0;
}

.productSort .conter .listw .title .name {
    font-size: 28rpx;
    color: #333;
    margin: 0 30rpx;
    font-weight: bold;
}

.productSort .conter .list {
    flex-wrap: wrap;
}

.productSort .conter .list .item {
    width: 177rpx;
    margin-top: 26rpx;
}

.productSort .conter .list .item .picture {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.productSort .conter .list .item .picture image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.productSort .conter .list .item .name {
    font-size: 24rpx;
    color: #333;
    height: 56rpx;
    line-height: 56rpx;
    width: 120rpx;
    text-align: center;
}

.acea-row {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.acea-row.row-center-wrapper {
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

body,
html {
    height: unset;
}

.line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.durgName {
    font-size: 30rpx;
    margin-top: 8rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.headline {
    font-size: 26rpx;
    margin-top: 5rpx;
}
.price {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.price > .priceMoney {
    color: #e26d5f;
    margin-top: 10rpx;
}
.drugs_adjustment {
    border-top-right-radius: 40rpx;
    border-bottom-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
    border: 1rpx solid #f3faff;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    color: #ffffff;
    height: 55rpx;
    line-height: 55rpx;
    font-size: 26rpx;
    padding: 0 25rpx;
}
.durgList {
    display: flex;
    background-color: #fff;
    padding: 21rpx 15rpx;
    border-radius: 20rpx;
    margin: 10rpx 20rpx;
}
.durgImg {
    width: 200rpx;
    height: 100rpx;
    margin-top: 20rpx;
}
.durgInfo {
    width: 100%;
    margin-left: 15rpx;
}
.durgImg image {
    width: 100%;
    height: 100%;
}
.uni-p-b-98 {
    height: 100rpx;
    /* 兼容 IOS<11.2 */
    height: calc(100rpx+ constant(safe-area-inset-bottom));
    /* 兼容 IOS>11.2 */
    height: calc(100rpx + env(safe-area-inset-bottom));
}
.example-body {
    padding: 0;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
}

.goods-carts {
    /* #ifndef APP-NVUE */
    display: flex;
    width: 120rpx;
    /* #endif */
    flex-direction: column;
    position: fixed;
    left: 40rpx;
    right: 0;
    /* #ifdef H5 */
    left: var(--window-left);
    right: var(--window-right);
    /* #endif */
    bottom: 20rpx;
}
.goods-carts image {
    width: 100%;
    height: 100%;
    position: relative;
    top: -10rpx;
    left: -14rpx;
}
/deep/.uni-badge-left-margin image.data-v-5330c49e {
    width: 100rpx;
    height: 100rpx;
}
.preview_content {
    background-color: #ffffff;
    padding: 50rpx 0;
}
.preview_content > .title {
    text-align: center;
    font-size: 30rpx;
}
.numberBox {
    display: inline-block;
    margin-bottom: 80rpx;
    margin-top: 20rpx;
}
.content {
    text-align: center;
    padding: 50rpx 0;
}
.inputStyle_border {
    position: absolute;
    left: 5%;
    width: 90%;
}
.inputStyle {
    border-radius: 40rpx;
    height: 65rpx;
    line-height: 65rpx;
    background-color: #ffffff;
    text-align: center;
    font-size: 30rpx;
}
.medicalinner_img {
    width: 150rpx;
    height: 140rpx;
    border-radius: 20rpx;
}
.medicalinner_border {
    display: flex;
    margin-top: 10rpx;
}
.medicalprice {
    font-size: 34rpx;
    color: #eb534c;
    margin-top: 30rpx;
}
.medicalName {
    width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn_appointment {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    color: #ffffff;
}
.uni-badge-left-margin image {
    width: 85rpx;
    height: 85rpx;
}
///deep/.uni-tab__cart-box{
//  background-color :unset !important;
//}
</style>
